<script lang="ts" setup>
import { ref } from "vue";
import { goMy } from "../../tools/go";
import {getOrders} from "../../api/waste/order"
import {goWastedetail} from "../../tools/go"
import UniIcons from "../../uni_modules/uni-icons/components/uni-icons/uni-icons.vue";
import UniPopup from "../../uni_modules/uni-popup/components/uni-popup/uni-popup.vue";
import UniLoadMore from "../../uni_modules/uni-load-more/components/uni-load-more/uni-load-more.vue";


const orderList = ref([
  {
    id: 1,
    orderNo: "RO202503020001",
    createTime: "2025-03-02 07:44",
    itemName: "旧手机",
    itemModel: "iPhone 13 Pro Max",
    status: "pending",
  },
  {
    id: 2,
    orderNo: "RO202503020002",
    createTime: "2025-03-02 07:30",
    itemName: "旧笔记本",
    itemModel: "MacBook Pro 2023",
    status: "processing",
  },
  {
    id: 3,
    orderNo: "RO202503020003",
    createTime: "2025-03-02 07:20",
    itemName: "废旧电池",
    itemModel: "18650锂电池",
    status: "completed",
  },
]);

const filterPopup = ref();
const isRefreshing = ref(false);
const loadMoreStatus = ref("more");
const selectedStatus = ref("");

const statusList = [
  { label: "0", value: "" },
  { label: "待处理", value: "pending" },
  { label: "处理中", value: "processing" },
  { label: "已完成", value: "completed" },
];

const getStatusText = (status: string) => {
  const statusMap: Record<string, string> = {
    0: "待处理",
    1: "处理中",
    2: "已完成",
  };
  return statusMap[status] || status;
};

// const handleBack = () => {
//   goMy()
// };

const handleFilter = () => {
  filterPopup.value.open();
};

const closeFilter = () => {
  filterPopup.value.close();
};

const selectStatus = (status: string) => {
  selectedStatus.value = status;
};

const resetFilter = () => {
  selectedStatus.value = "";
};

const confirmFilter = () => {
  // 实现筛选逻辑
  filterPopup.value.close();
};

const goToDetail = (orderId: number) => {
  goWastedetail(orderId)
};

const loadMore = () => {
  loadMoreStatus.value = "loading";
  setTimeout(() => {
    loadMoreStatus.value = "noMore";
  }, 1000);
};

const onRefresh = () => {
  isRefreshing.value = true;
  setTimeout(() => {
    isRefreshing.value = false;
  }, 1000);
};

const orderPage = {
  page: 1,
  size: 10
}

const init = () => {
  getOrders(orderPage.page, orderPage.size).then(res => {
    orderList.value = res.data.records
  })
}

init()
</script>

<template>
  <view class="page-container">
    <!-- 顶部标题栏 -->
    <view class="header">
      <uni-icons class="back-icon" type="left" size="20" @click="goMy" />
      <text class="title">订单列表</text>
      <uni-icons
          class="filter-icon"
          type="filter"
          size="20"
          @click="handleFilter"
      />
    </view>

    <!-- 订单列表区域 -->
    <scroll-view
        class="order-list"
        scroll-y
        @scrolltolower="loadMore"
        refresher-enabled
        :refresher-triggered="isRefreshing"
        @refresherrefresh="onRefresh"
    >
      <view
          v-for="order in orderList"
          :key="order.id"
          class="order-card"
          @click="goToDetail(order.id)"
      >
        <view class="order-header">
          <text class="order-number">订单号：{{ order.orderNum }}</text>
          <text class="order-time">{{ order.createTime }}</text>
        </view>

        <view class="order-content">
          <view class="item-info">
            <text class="item-name">{{ order.orderName }}</text>
            <text class="item-model">{{ order.wasteName }}</text>
          </view>
          <view :class="['order-status', `status-${order.status === 0 ? 'pending': order.status === 1 ? 'processing' : 'completed'}`]">
            {{ getStatusText(order.orderStatus) }}
          </view>
        </view>
      </view>

      <!-- 加载更多 -->
      <uni-load-more :status="loadMoreStatus" />
    </scroll-view>

    <!-- 筛选弹窗 -->
    <uni-popup ref="filterPopup" type="right">
      <view class="filter-container">
        <view class="filter-header">
          <text class="filter-title">筛选</text>
          <uni-icons type="clear" size="20" @click="closeFilter" />
        </view>
        <view class="filter-content">
          <view class="filter-section">
            <text class="section-title">订单状态</text>
            <view class="status-list">
              <view
                  v-for="status in statusList"
                  :key="status.value"
                  :class="['status-item', { active: selectedStatus === status.value }]"
                  @click="selectStatus(status.value)"
              >
                {{ status.label }}
              </view>
            </view>
          </view>
          <view class="filter-buttons">
            <button class="reset-btn" @click="resetFilter">重置</button>
            <button class="confirm-btn" type="primary" @click="confirmFilter">
              确定
            </button>
          </view>
        </view>
      </view>
    </uni-popup>
  </view>
</template>



<style>
page {
  height: 100%;
}

.page-container {
  height: 100%;
  display: flex;
  flex-direction: column;
  background-color: #f5f5f5;
}

.header {
  height: 88rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 30rpx;
  background-color: #ffffff;
  flex-shrink: 0;
}

.back-icon,
.filter-icon {
  width: 40rpx;
  height: 40rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.title {
  font-size: 16px;
  font-weight: 500;
  color: #333333;
}

.order-list {
  flex: 1;
  overflow: auto;
  padding: 20rpx;
}

.order-card {
  background-color: #ffffff;
  border-radius: 12rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
}

.order-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20rpx;
}

.order-number {
  font-size: 14px;
  color: #666666;
}

.order-time {
  font-size: 14px;
  color: #999999;
}

.order-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.item-info {
  flex: 1;
}

.item-name {
  font-size: 16px;
  font-weight: 500;
  color: #333333;
  margin-bottom: 8rpx;
  display: block;
}

.item-model {
  font-size: 14px;
  color: #666666;
  display: block;
}

.order-status {
  padding: 8rpx 16rpx;
  border-radius: 6rpx;
  font-size: 14px;
}

.status-pending {
  background-color: #fff7e6;
  color: #fa8c16;
}

.status-processing {
  background-color: #e6f7ff;
  color: #1890ff;
}

.status-completed {
  background-color: #f6ffed;
  color: #52c41a;
}

.filter-container {
  width: 600rpx;
  height: 100%;
  background-color: #ffffff;
}

.filter-header {
  height: 88rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 30rpx;
  border-bottom: 1px solid #f0f0f0;
}

.filter-title {
  font-size: 16px;
  font-weight: 500;
  color: #333333;
}

.filter-content {
  padding: 30rpx;
}

.filter-section {
  margin-bottom: 40rpx;
}

.section-title {
  font-size: 14px;
  color: #666666;
  margin-bottom: 20rpx;
  display: block;
}

.status-list {
  display: flex;
  flex-wrap: wrap;
  gap: 20rpx;
}

.status-item {
  padding: 16rpx 32rpx;
  border-radius: 6rpx;
  background-color: #f5f5f5;
  font-size: 14px;
  color: #666666;
}

.status-item.active {
  background-color: #e6f7ff;
  color: #1890ff;
}

.filter-buttons {
  display: flex;
  gap: 20rpx;
  margin-top: 60rpx;
}

.reset-btn,
.confirm-btn {
  flex: 1;
  height: 80rpx;
  line-height: 80rpx;
  text-align: center;
  border-radius: 6rpx;
  font-size: 14px;
}

.reset-btn {
  background-color: #f5f5f5;
  color: #666666;
}

.confirm-btn {
  background-color: #1890ff;
  color: #ffffff;
}
</style>
